<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>家长端 - 查看信件</title>
  <link rel="stylesheet" href="../css/style.css">
  <style>
    .toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 15px;
      align-items: center;
    }

    .search-box {
      flex: 1;
      min-width: 200px;
      display: flex;
    }

    .search-box input {
      flex: 1;
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 4px 0 0 4px;
    }

    .search-box button {
      padding: 8px 15px;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 0 4px 4px 0;
      cursor: pointer;
    }

    .filter-select {
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 4px;
    }

    .letter-item {
      border: 1px solid #ddd;
      border-radius: 8px;
      margin-bottom: 15px;
      overflow: hidden;
      transition: transform 0.2s;
    }

    .letter-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    .letter-header {
      background-color: #f5f5f5;
      padding: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
    }

    .letter-title {
      font-weight: bold;
      font-size: 16px;
    }

    .letter-title.unread::before {
      content: '●';
      color: #007bff;
      margin-right: 5px;
    }

    .letter-date {
      color: #666;
      font-size: 14px;
    }

    .letter-sender {
      color: #007bff;
      font-size: 14px;
    }

    .letter-content {
      padding: 15px;
      background-color: #fff;
      display: none;
    }

    .letter-actions {
      padding: 10px 15px;
      background-color: #f9f9f9;
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }

    .action-btn {
      padding: 5px 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
      background-color: #fff;
      cursor: pointer;
      font-size: 14px;
    }

    .action-btn:hover {
      background-color: #f5f5f5;
    }

    .pagination {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }

    .pagination button {
      padding: 8px 12px;
      margin: 0 5px;
      border: 1px solid #ddd;
      border-radius: 4px;
      background-color: #fff;
      cursor: pointer;
    }

    .pagination button.active {
      background-color: #007bff;
      color: #fff;
      border-color: #007bff;
    }

    .pagination button:hover:not(.active) {
      background-color: #f5f5f5;
    }
  </style>
</head>
<body>
<div class="nav">
  <a href="view_letter.html">查看信件</a>
  <a href="chat.html">对话沟通</a>
  <a href="more_features.html">更多功能</a>
  <a href="../index.html">退出登录</a>
</div>

<div class="container">
  <h3>查看信件</h3>

  <!-- 工具栏 -->
  <div class="toolbar">
    <div class="search-box">
      <input type="text" placeholder="搜索信件...">
      <button><i class="fa fa-search"></i> 搜索</button>
    </div>

    <select class="filter-select">
      <option value="all">全部信件</option>
      <option value="unread">未读信件</option>
      <option value="read">已读信件</option>
    </select>

    <select class="filter-select">
      <option value="newest">最新优先</option>
      <option value="oldest">最早优先</option>
    </select>
  </div>

  <!-- 信件列表 -->
  <div class="letters-container">
    <div class="letter-item">
      <div class="letter-header" onclick="toggleLetter(this)">
        <div>
          <div class="letter-title unread">家长会通知</div>
          <div class="letter-sender">教务处</div>
        </div>
        <div class="letter-date">2025-06-28</div>
      </div>
      <div class="letter-content">
        <p>尊敬的家长：</p>
        <p>我校将于2025年7月5日（星期六）上午9:00召开家长会，请准时参加。</p>
        <p>会议内容：本学期学生成绩总结及下学期学习计划。</p>
        <p>XX中学教务处</p>
      </div>
      <div class="letter-actions">
        <button class="action-btn" onclick="markAsRead(this)">标记为已读</button>
      </div>
    </div>

    <div class="letter-item">
      <div class="letter-header" onclick="toggleLetter(this)">
        <div>
          <div class="letter-title unread">暑期安全提醒</div>
          <div class="letter-sender">德育处</div>
        </div>
        <div class="letter-date">2025-06-15</div>
      </div>
      <div class="letter-content">
        <p>尊敬的家长：</p>
        <p>暑假即将开始，请提醒孩子注意以下安全事项：</p>
        <ol>
          <li>注意交通安全，遵守交通规则</li>
          <li>不要独自游泳，防止溺水</li>
          <li>合理安排学习时间，完成暑假作业</li>
        </ol>
        <p>XX中学德育处</p>
      </div>
      <div class="letter-actions">
        <button class="action-btn" onclick="markAsRead(this)">标记为已读</button>
      </div>
    </div>

    <div class="letter-item">
      <div class="letter-header" onclick="toggleLetter(this)">
        <div>
          <div class="letter-title">校服订购通知</div>
          <div class="letter-sender">总务处</div>
        </div>
        <div class="letter-date">2025-06-10</div>
      </div>
      <div class="letter-content">
        <p>尊敬的家长：</p>
        <p>我校将于下学期更换校服，请于6月20日前完成校服尺寸确认和订购。</p>
        <p>具体操作流程请登录学校官网查看。</p>
        <p>XX中学总务处</p>
      </div>
      <div class="letter-actions">
        <button class="action-btn" style="color: #666; cursor: not-allowed;">已读</button>
      </div>
    </div>
  </div>

  <!-- 分页 -->
  <div class="pagination">
    <button>上一页</button>
    <button class="active">1</button>
    <button>2</button>
    <button>3</button>
    <button>下一页</button>
  </div>
</div>

<script>
  // 展开/收起信件内容
  function toggleLetter(header) {
    const content = header.nextElementSibling;
    const isOpen = content.style.display === 'block';

    if (isOpen) {
      content.style.display = 'none';
    } else {
      content.style.display = 'block';

      // 标记为已读
      const title = header.querySelector('.letter-title');
      if (title.classList.contains('unread')) {
        title.classList.remove('unread');

        // 更新操作按钮
        const actions = header.parentElement.querySelector('.letter-actions');
        const btn = actions.querySelector('button');
        btn.innerHTML = '已读';
        btn.style.color = '#666';
        btn.style.cursor = 'not-allowed';
        btn.removeAttribute('onclick');
      }
    }
  }

  // 标记为已读
  function markAsRead(btn) {
    const item = btn.closest('.letter-item');
    const title = item.querySelector('.letter-title');
    const header = item.querySelector('.letter-header');

    if (title.classList.contains('unread')) {
      title.classList.remove('unread');
      btn.innerHTML = '已读';
      btn.style.color = '#666';
      btn.style.cursor = 'not-allowed';
      btn.removeAttribute('onclick');
    }
  }
</script>
</body>
</html>
